<template>
  <!-- 项目实施 - 右上角tab5 - 流程预测 - content -->
  <div class="right-tab-con5">
    <!-- <img v-if="img" class="right-tab-con-img" :src="img" width="100%"> -->
    <p class="tip"> 基于流程模拟技术和行为大数据提供智能预测结果，供参考。 </p>
    <div v-if="Object.keys(infos).length != 0">
      <div class="boards">
        <div class="board-item board1" :style="{'height': infos.dateTime ? '70px' : '50px'}">
          <p> 未完成节点 </p>
          <p> {{ infos.num1 }} </p>
        </div>
        <div class="board-item board2" :style="{'height': infos.dateTime ? '70px' : '50px'}">
          <p> 预计耗时 </p>
          <p> {{ infos.num2 ? infos.num2 : '-' }} </p>
        </div>
        <div class="board-item board3" :style="{'height': infos.dateTime ? '70px' : '50px'}">
          <p> 预计完成时间 </p>
          <div v-if="infos.dateTime">
            <p> {{ infos.dateTime.split(" ")[0] }} </p>
            <p> {{ infos.dateTime.split(" ")[1] }} </p>
          </div>
          <p v-else> - </p>
        </div>
      </div>
      <el-timeline class="flows" v-if="infos.list && infos.list.length>0">
        <el-timeline-item :style="{'--bgColor': i.handleTime ? idxI == (infos.list.length - 1) ? '#FAFAFA' : '#67C13A' : '#FFFFFF', '--textColor': i.handleTime ? idxI == (infos.list.length - 1) ? '#36A946' : '#FFFFFF' : '#9B9B9B', '--borderColor': i.handleTime ? '#67C13A' : '#E2EAF1'}" v-for="(i, idxI) in infos.list" :key="idxI" :class="!i.handleTime ? 'show-tip2' : ''">
          <i class="arrow"></i>
          <template slot="dot">
            <div v-if="i.handleTime"> 
              <span v-if="idxI == (infos.list.length - 1)"> END </span>
              <i class="el-icon-check" style="font-size: 12px;" v-else></i>
            </div>
            <div v-else> 
              <span v-if="idxI == (infos.list.length - 1)"> END </span>
            </div>
          </template>
          <p v-if="!i.handleTime && idxI != 0" class="card-row tip2"> 以下节点为未处理节点 </p>
          <el-card>
            <div class="card-row">
              <p class="tl">{{ i.name }} <span v-if="i.role">【{{ i.role }}】</span></p>
              <p class="statue tr"> {{ i.opinion }} </p>
            </div>
            <p class="tl"> 执行人 <span class="statue cp">{{ i.handler }}</span> </p>
            <div v-if="i.handleTime" class="card-row">
              <p class="tl"> <span>{{ i.handleTime }}</span> 完成 </p>
              <p class="tr"> 耗时：<span>{{ i.investTime }}</span> </p>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div v-else class="warning-text">
      <p>说明：</p>
      <p>流程预测遇到以下原因未完成：</p>
      <p>1.项目负责人[协同]，分支条件满足([当前节点]报告人 != 项目负责人)</p>
      <p>2.项目负责人[协同]，单人执行，没有匹配到人员列表。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "rightTabCon5",
  components: {},
  data() {
    return {
      img: '',
      infos: {},
      warningText: {},
    }
  },
  props: {
    tabTitle: {
      type: String,
      default: () => ''
    },
    info: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    infos: {
      handler(n, o) {},
      deep: true,
      immediate: true
    }
  },
  mounted() {
    setTimeout(() => {
      if(this.info && this.info[0]) {
        this.infos = this.info[0];
        this.$nextTick(() => {
          let timelineItems = document.querySelectorAll('.el-timeline-item');
          timelineItems.forEach((i) => {
            if(i.classList.contains('show-tip2') && i.previousElementSibling) {
              i.previousElementSibling.querySelector('.el-timeline-item__tail').style.height = "calc(100% + 20px)";
            }
          })
        })
      } else {
        this.infos = {};
      }
    }, 200)
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
  .right-tab-con5 {
    width: calc(100% - 20px);
    height: 100%;
    margin: 0 auto;
    background: #fafafa;
    overflow: overlay;
    padding-bottom: 20px;
    .warning-text {
      background: rgba(120, 255, 0, 0.08);
      font-size: 12px;
      padding: 10px;
      margin: 0 10px;
      border-radius: 3px;
      line-height: 1.5;
      p {
        margin: 0;
      }
    }
    .tip {
      color: #999999;
      font-size: 12px;
      text-align: justify;
      padding: 10px 10px 0;
      width: 100%;
    }
    .boards {
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      width: 100%;
      .board-item {
        font-size: 12px;
        width: 100%;
        min-height: 50px;
        max-height: 80px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 8px 5px;
        border-radius: 6px;
        box-shadow: 0px 6px 10px 0px rgba(122, 133, 155, 0.2);
        p {
          margin: 3px auto;
          text-align: center;
        }
        &.board1 {
          background: #2085EC;
          flex: 2 1 0;
        }
        &.board2 {
          margin: 0 6px;
          background: #05CE9D;
          flex: 2 1 0;
        }
        &.board3 {
          background: #32BEF2;
          flex: 2.5 1 0;
        }
      }
    }
    .flows {
      margin: 20px auto;
      padding-left: 10px;
      font-size: 12px;
      p {
        margin: 0;
      }
      ::v-deep {
        .el-timeline-item__content {
          color: #333333;
          width: calc(100% - 10px);
          background: #ffffff;
          border-radius: 3px;
          box-shadow: 0 2px 12px 0 rgba(164, 233, 147, 0.05);
          z-index: 0;
          position: relative;
          border: 0.5px solid var(--borderColor);
          .arrow {
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            border-left: 0.5px solid var(--borderColor);
            border-top: 0.5px solid var(--borderColor);
            margin-left: -7px;
            margin-top: 25px;
            position: absolute;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            background: #ffffff;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            z-index: -1;
          }
          .el-card {
            border: none;
            background-color: transparent;
            box-shadow: none;
            position: relative;
            background: #ffffff;
            z-index: 1;
            .el-card__body {
              padding: 5px 10px;
              height: 80px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
          }
        }
        .el-timeline-item {
          padding-bottom: 5px;
        }
        .el-timeline-item__tail {
          margin-top: 30px;
          left: 4px;
          height: 100%;
          border-left: 2px dotted #E3E3E3;
        }
        .el-timeline-item__node,
        .el-timeline-item__node--normal {
          margin-top: 20px;
          left: -1px;
          width: 12px;
          height: 12px;
        }
        .el-timeline-item__dot {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          width: 20px;
          height: 20px;
          margin: 20px 0 0 -4px;
          font-size: 8px;
          font-weight: bolder;
          border-radius: 50%;
          color: var(--textColor);
          background: var(--bgColor);
          border: 1px solid  var(--textColor);
        }
      }
      .card-row {
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        line-height: 30px;
        &.tip2 {
          position: absolute;
          left: 0;
          top: -15px;
          color: #999;
          text-align: center;
          display: block;
        }
      }
      .tl {
        text-align: left;
      }
      .tr {
        text-align: right;
      }
      .statue {
        color: #36A946;
      }
      .cp {
        cursor: pointer;
      }
      .show-tip2 {
        margin-top: 20px;
        .card-row.tip2 {
          top: -30px;
        }
      }
    }
  }
</style>